{% extends 'base.html' %}
{% block title %}门诊医生工作台{% endblock %}
{% block body-context %}
    {# 两侧留白较小的容器 #}
    <div class="container-fluid">
        {# 栅格布局，在行中指定列的宽度，这里将整个屏幕分成左3右9的布局，左边为诊中患者和待诊患者信息，右边为分页表格（病例首页，检查检验等 #}
        <div class="row">
            {# 第一列宽度为3，用于放置诊中患者信息和待诊患者信息 #}
            <div class="col-md-3">
                {# 在第一列中新建行，每一个container占一行（这里的一行指container不会横向排布 #}
                <div class="row">
                    {# 诊中患者信息 #}
                    <div class="container">
                        <div class="card">
                            <div class="card-header">诊中患者</div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover small">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>Kolor Tea lgmlmg</td>
                                            <td><span class="badge badge-primary light">Sale</span>
                                            </td>
                                        </tr>

                                        </a>

                                        <tr>
                                            <td>Kolor Tea Shirt</td>
                                            <td><span class="badge badge-success">Tax</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Blue Backpack</td>
                                            <td><span class="badge badge-danger light">Extended</span>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    {# 待诊患者信息 #}
                    <div class="container">
                        <div class="card">
                            <div class="card-header">待诊患者</div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover small">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Status</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>Kolor Tea Shirt</td>
                                            <td><span class="badge badge-primary light">Sale</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Kolor Tea Shirt</td>
                                            <td><span class="badge badge-success">Tax</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Blue Backpack</td>
                                            <td><span class="badge badge-danger light">Extended</span>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {# 第二列的宽度为9，用于放置分页表格（病例首页、检查检验等） #}
            <div class="col-md-9">
                {# 这些分页表单用container包裹，为了美观 #}
                <div class="container">
                    {# 分页导航栏列表，用于放置分页按钮 #}
                    <ul class="nav nav-pills review-tab">
                        {# 病例首页按钮 #}
                        <li class="nav-item">
                            <a href="#bing_li_shou_ye" class="nav-link active" data-toggle="tab"
                               aria-expanded="false">病例首页</a>
                        </li>
                        {# 检查检验按钮 #}
                        <li class="nav-item">
                            <a href="#jian_cha_jian_yan" class="nav-link" data-toggle="tab"
                               aria-expanded="false">检查检验</a>
                        </li>
                        {# 门诊确诊按钮 #}
                        <li class="nav-item">
                            <a href="#men_zhen_que_zhen" class="nav-link" data-toggle="tab"
                               aria-expanded="true">门诊确诊</a>
                        </li>
                        {# 处方开具按钮 #}
                        <li class="nav-item">
                            <a href="#navpills-4" class="nav-link" data-toggle="tab" aria-expanded="true">处方开具</a>
                        </li>
                        {# 手术申请按钮 #}
                        <li class="nav-item">
                            <a href="#navpills-4" class="nav-link" data-toggle="tab" aria-expanded="true">手术申请</a>
                        </li>
                        {# 患者账单按钮 #}
                        <li class="nav-item">
                            <a href="#huan_zhe_zhang_dan" class="nav-link" data-toggle="tab"
                               aria-expanded="true">患者账单</a>
                        </li>
                    </ul>
                    {# 分页内容，用来设置每个分页的具体内容 #}
                    <div class="tab-content">
                        {# 病例首页页面信息，第一次进入页面默认显示这个 #}
                        <div id="bing_li_shou_ye" class="tab-pane active">
                            <div class="container">
                                <div class="card-body">
                                    <div class="basic-form">
                                        <form action="#">
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">患者主诉</span>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">现病史</span>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">现病治疗情况</span>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">&nbsp;既往史&nbsp;</span>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">过敏史</span>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">体格检查</span>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">发病时间</span>
                                                </div>
                                                <input type="text" class="form-control">
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {# 检查检验页面信息 #}
                        <div id="jian_cha_jian_yan" class="tab-pane">
                            <div class="container">
                                <div class="card-body">
                                    <div class="basic-form">
                                        <form action="#">
                                            <div class="form-group">
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">常规检验</span>
                                                    </div>
                                                    <select class="form-control" id="sel1">
                                                        <option>无</option>
                                                        <option>血常规</option>
                                                        <option>尿常规</option>
                                                        <option>便常规</option>
                                                        <option>精液常规</option>
                                                        <option>白带常规</option>
                                                        <option>脑脊液常规</option>
                                                        <option>血流变</option>
                                                        <option>血沉</option>
                                                        <option>血凝</option>
                                                        <option>血涂片</option>
                                                    </select>
                                                </div>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">生化检验</span>
                                                    </div>
                                                    <select class="form-control" id="sel1">
                                                        <option>无</option>
                                                        <option>肝功能</option>
                                                        <option>肾功能</option>
                                                        <option>心肌酶</option>
                                                        <option>血脂</option>
                                                        <option>肌钙蛋白</option>
                                                        <option>血气分析</option>
                                                        <option>淀粉酶</option>
                                                        <option>电解质</option>
                                                    </select>
                                                </div>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">免疫检验</span>
                                                    </div>
                                                    <select class="form-control" id="sel1">
                                                        <option>无</option>
                                                        <option>乙肝五项</option>
                                                        <option>甲肝</option>
                                                        <option>丙肝</option>
                                                        <option>梅毒</option>
                                                        <option>肺炎支原体</option>
                                                        <option>甲状腺功能检查</option>
                                                        <option>HIV</option>
                                                        <option>类风湿检查</option>
                                                    </select>
                                                </div>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">细菌检验</span>
                                                    </div>
                                                    <select class="form-control" id="sel1">
                                                        <option>无</option>
                                                        <option>葡萄球菌</option>
                                                        <option>杆菌</option>
                                                        <option>链球菌</option>
                                                        <option>真菌</option>
                                                    </select>
                                                </div>
                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">其他检验</span>
                                                    </div>
                                                    <select class="form-control" id="sel1">
                                                        <option>无</option>
                                                        <option>强制性脊椎炎</option>
                                                        <option>脑钠肽</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="card">
                                            <div class="card-header border-0 pb-0">
                                                <h5 class="card-title">检查结果</h5>
                                            </div>
                                            <div class="card-body">
                                                <p class="card-text">He lay on his armour-like back, and if he
                                                    lifted his head a little he could see his brown
                                                    belly, slightly domed and divided by arches into stiff <br>
                                                    sections. The bedding was hardly able to cover
                                                    it and seemed ready to
                                                    slide off any moment.
                                                </p>
                                            </div>
                                            <div class="card-footer border-0 pt-0">
                                                <p class="card-text d-inline">Card footer</p>
                                                <a href="javascript:void()" class="card-link float-right">Card
                                                    link</a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        {# 门诊确诊页面信息 #}
                        <div id="men_zhen_que_zhen" class="tab-pane">
                            <div class="container">
                                <div class="card-body">
                                    <div class="basic-form">
                                        <form action="#">
                                        </form>
                                    </div>
                                </div>

                            </div>
                        </div>
                        {# 患者账单页面信息 #}
                        <div id="huan_zhe_zhang_dan" class="tab-pane">
                            <div class="container">
                                <div class="card-body">
                                    <div class="basic-form">
                                        <form action="#">
                                            <div class="card">
                                                <div class="card-header border-0 pb-0">
                                                    <h5 class="card-title">金额细则</h5>
                                                </div>
                                                <div class="card-body">
                                                    <div class="table-responsive">
                                                        <table class="table table-hover small">
                                                            <thead>
                                                            <tr>
                                                                <th>药品名</th>
                                                                <th>类型</th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr>
                                                                <td>Kolor Tea Shirt For Man</td>
                                                                <td><span class="badge badge-primary light">Sale</span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Kolor Tea Shirt For Women</td>
                                                                <td><span class="badge badge-success">Tax</span>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>Blue Backpack For Baby</td>
                                                                <td><span
                                                                        class="badge badge-danger light">Extended</span>
                                                                </td>
                                                            </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="card-footer border-0 pt-0">
                                                    <p class="card-text d-inline">Card footer</p>
                                                    <a href="javascript:void()" class="card-link float-right">Card
                                                        link</a>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
<div class="default-tab">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home"><i class="la la-home mr-2"></i> Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#profile"><i class="la la-user mr-2"></i> Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#contact"><i class="la la-phone mr-2"></i> Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#message"><i class="la la-envelope mr-2"></i> Message</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade show active" id="home" role="tabpanel">
            <div class="pt-4">
                <h4>This is home title</h4>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
                    the blind texts. Separated they live in Bookmarksgrove.
                </p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
                    the blind texts. Separated they live in Bookmarksgrove.
                </p>
            </div>
        </div>
        <div class="tab-pane fade" id="profile">
            <div class="pt-4">
                <h4>This is profile title</h4>
                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
                    retro synth master cleanse. Mustache cliche tempor.
                </p>
                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
                    retro synth master cleanse. Mustache cliche tempor.
                </p>
            </div>
        </div>
        <div class="tab-pane fade" id="contact">
            <div class="pt-4">
                <h4>This is contact title</h4>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
                    the blind texts. Separated they live in Bookmarksgrove.
                </p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live
                    the blind texts. Separated they live in Bookmarksgrove.
                </p>
            </div>
        </div>
        <div class="tab-pane fade" id="message">
            <div class="pt-4">
                <h4>This is message title</h4>
                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
                    retro synth master cleanse. Mustache cliche tempor.
                </p>
                <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua,
                    retro synth master cleanse. Mustache cliche tempor.
                </p>
            </div>
        </div>
    </div>
</div>
